import Bg from './components/Bg'
import Header from './components/Header'
import Card from './components/Card'
import TodayCurrentData from './components/Charts/TodayCurrentData'
import FlowStat from './components/Charts/FlowStat'
import TypeDistribution from './components/Charts/TypeDistribution'
import Map from './components/Charts/Map'
import { Col, Row } from 'antd'
import UserTrendStatistics from './components/Charts/UserTrendStatistics'
import TopWebsite from './components/Charts/TopWebsite'
import Record from './components/Charts/Record'
import background_map from './images/background_map.png'
import './index.less'

const Report = () => {

    const colStyle = {
        justifyContent: 'center', display: 'flex'
    }

    return <>
        <Bg />

        <div className="report_wrap">
            <Header />
            <Row>
                <Col span={7}>
                    <Row gutter={[0, 30]} align={'middle'} justify={'center'}>
                        <Col span={24} style={colStyle}>
                            <Card height={'22vh'} title='今日实时数据'>
                                <TodayCurrentData />
                            </Card>
                        </Col>
                        <Col span={24} style={colStyle}>
                            <Card height={'34vh'} title='流量访问统计'>
                                <FlowStat />
                            </Card>
                        </Col>
                        <Col span={24} style={colStyle}>
                            <Card height={'24.5vh'} title='产品数据报表分析'>
                                <TypeDistribution />
                            </Card>
                        </Col>
                    </Row>
                </Col>

                <Col span={10}>
                    <Row gutter={[30, 30]}>
                        <Col span={24} style={colStyle}>
                            <Card hideBorder style={{
                                backgroundImage: `url('${background_map}')`,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                            }} width={'100%'} height={'60vh'} title=''>
                                <Map />
                            </Card>
                        </Col>

                        <Col span={24} style={colStyle}>
                            <Card width={'100%'} height={'23vh'} title='Top设备来源'>
                                <TopWebsite />
                            </Card>
                        </Col>
                    </Row>
                </Col>

                <Col span={7}>
                    <Row gutter={[0, 30]} align={'middle'} justify={'center'}>
                        <Col span={24} style={colStyle}>
                            <Card height={'30vh'} title='近期申请记录'>
                                <Record type='apply'/>
                            </Card>
                        </Col>
                        <Col span={24} style={colStyle}>
                            <Card height={'25vh'} title='用户询价趋势'>
                                <UserTrendStatistics />
                            </Card>
                        </Col>
                        <Col span={24} style={colStyle}>
                            <Card height={'25.5vh'} title='近期搜索记录'>
                                <Record type='search' />
                            </Card>
                        </Col>
                    </Row>
                </Col>
            </Row>

        </div>
    </>
}

export default Report